<div class="layui-form layui-layer-outerbox">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 活动名称</label>
        <div class="layui-input-block layui-block-middle">
            <input type="text" name="{{makeElUniqueName('subject')}}" required lay-verify="required" placeholder="标识该活动的名称，必填（*）" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 活动图片</label>
        <div class="layui-input-block layui-block-middle">
            <div class="layui-big-upload-box">
                <img id="{{makeElUniqueName('activity_upload_img')}}" src="/images/no-pic-back.png">
                <input type="hidden" name="{{makeElUniqueName('activity_img_file_id')}}" value="">
                <div class="site-demo-upbar">
                    <input type="file" name="{{makeElUniqueName('activity_img')}}" class="layui-upload-file" id="{{makeElUniqueName('activity_img')}}">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 报名起始时间</label>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="报名起始时间" required lay-verify="required" name="{{makeElUniqueName('enter_time_start')}}">
        </div>
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 报名结束时间</label>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="报名结束时间" required lay-verify="required" name="{{makeElUniqueName('enter_time_end')}}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 活动起始时间</label>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="活动起始时间" required lay-verify="required" name="{{makeElUniqueName('active_time_start')}}">
        </div>
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 活动结束时间</label>
        <div class="layui-input-inline">
            <input class="layui-input" placeholder="活动结束时间" required lay-verify="required" name="{{makeElUniqueName('active_time_end')}}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 活动类型</label>
        <div class="layui-input-block layui-block-middle">
            <select name="{{makeElUniqueName('activity_type')}}" required lay-verify="required">
                @foreach (\App\Activity::$ACTIVITY_TYPE_MAP as $item)
                    <option value='{{$item['key']}}'>{{$item['text']}}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 总需求人数</label>
        <div class="layui-input-block layui-block-middle">
            <input type="text" name="{{makeElUniqueName('volunteer_num')}}" required lay-verify="required|number" placeholder="需求人数" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 最低需求人数</label>
        <div class="layui-input-block layui-block-middle">
            <input type="text" name="{{makeElUniqueName('min_volunteer_num')}}" required lay-verify="required|number" placeholder="最低需求人数" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 活动参与方式</label>
        <div class="layui-input-block layui-block-middle">
            <select name="{{makeElUniqueName('join_method')}}" required lay-verify="required">
                @foreach (\App\Activity::$USER_JOIN_PERMIT_TYPE_MAP as $item)
                    <option value='{{$item['key']}}'>{{$item['text']}}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px">志愿者参与要求</label>
        <div class="layui-input-block layui-block-middle">
            <input type="text" name="{{makeElUniqueName('volunteer_rule')}}" placeholder="志愿者参与要求" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 活动详情</label>
        <div class="layui-input-block layui-block-middle">
            <textarea class="layui-textarea" id="{{makeElUniqueName('description')}}" name="{{makeElUniqueName('description')}}" style="display: none">
            </textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 活动可获时长</label>
        <div class="layui-input-block layui-block-middle">
            <input type="text" name="{{makeElUniqueName('time_length')}}" required lay-verify="required|number" placeholder="活动可获公益时长，为0则不计入公益时长" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width:100px"><span style="color:red">*</span> 活动举办城市</label>
        <div class="layui-input-block layui-block-middle">
            <ul class="layui-select-box" id="{{makeElUniqueName('select_cities')}}">
            </ul>
        </div>
    </div>
    <div class="layui-form-item layui-form-center">
        <button class="layui-btn" lay-submit lay-filter="{{makeElUniqueName('activity_save')}}"><i class="layui-icon">&#xe605;</i> 保存</button>
        <button class="layui-btn layui-btn-primary" onclick="layer.close(layui.popLayerUtil.index);">关闭</button>
    </div>
</div>

<script>
    layui.use(['form', 'validator', 'uploadUtil', 'dateRangeUtil', 'selectBox', 'reditorUtil'], function(){
        var form = layui.form();
        var $ = layui.jquery;
        var layer = layui.layer;
        var popLayerUtil = layui.popLayerUtil;
        var dateRangeUtil = layui.dateRangeUtil;
        var uploadUtil = layui.uploadUtil;
        var selectBox = layui.selectBox;
        var reditorUtil = layui.reditorUtil;

        form.render();

        var descIndex = reditorUtil.doInitEditor({elemId:'{{makeElUniqueName('description')}}'});

        uploadUtil.doUpload({
            success: function(fileId, filePath, fileKey) {
                if (fileKey == '{{makeElUniqueName('activity_img')}}') {
                    $('#{{makeElUniqueName('activity_upload_img')}}').attr('src', filePath);
                    $('input[name=\'{{makeElUniqueName('activity_img_file_id')}}\']').val(fileId);
                }
            }
        });

        dateRangeUtil.makeDateRange({
            startElem: $('input[name=\'{{makeElUniqueName('enter_time_start')}}\']'),
            endElem: $('input[name=\'{{makeElUniqueName('enter_time_end')}}\']'),
            isDateTime: true,
            format: 'YYYY-MM-DD hh:mm'
        });

        dateRangeUtil.makeDateRange({
            startElem: $('input[name=\'{{makeElUniqueName('active_time_start')}}\']'),
            endElem: $('input[name=\'{{makeElUniqueName('active_time_end')}}\']'),
            isDateTime: true,
            format: 'YYYY-MM-DD hh:mm'
        });

        var citybox = selectBox({
            elem: $('#{{makeElUniqueName('select_cities')}}'),
            onBeforeRemoveItem: function(box) {
                if (box.itemCount() <= 1) {
                    layer.msg('必须至少选择一个举办城市', { icon: 2 });
                    return false;
                }
                return true;
            },
            onBtnAddClick: function(box) {
                $.get('/backstage/common/getcityselector', {}, function(str){
                    var popLayerUtil = layui.popLayerUtil;
                    popLayerUtil.doPopUp({
                        index: layer.open({
                            id: '{{makeElUniqueName('city_selector')}}',
                            title: false,
                            type: 1,
                            content: str,
                            area: ['250px', '180px']
                        }),
                        onClose: function(value, cityname) {
                            var existsCityIds = box.getAllItemIds();

                            if (existsCityIds.indexOf(value) != -1) {
                                layer.msg('该城市已经是举办城市了，不可继续添加', { icon: 2 });
                                return false;
                            }
                            box.addItem({
                                id: value,
                                title: cityname
                            })
                            return true;
                        }
                    });
                });
            }
        }).addItem({
            id: {{$city->id}},
            title: '{{$city->name}}',
        });

        form.on('submit({{makeElUniqueName('activity_save')}})', function(data){
            var index = layer.load(1);
            var url = '/backstage/api/activity/create_act_save';

            var selectedCityIds = citybox.getAllItemIds();
            var cityIds = '';

            for (var i=0; i<selectedCityIds.length; i++) {
                cityIds += selectedCityIds[i] + ',';
            }

            if (cityIds != '') {
                cityIds = cityIds.substring(0, cityIds.length-1);
            }

            var postParam = {
                subject: data.field['{{makeElUniqueName('subject')}}'],
                picture: data.field['{{makeElUniqueName('activity_img_file_id')}}'],
                enter_time_start: data.field['{{makeElUniqueName('enter_time_start')}}'],
                enter_time_end: data.field['{{makeElUniqueName('enter_time_end')}}'],
                active_time_start: data.field['{{makeElUniqueName('active_time_start')}}'],
                active_time_end: data.field['{{makeElUniqueName('active_time_end')}}'],
                activity_type: data.field['{{makeElUniqueName('activity_type')}}'],
                volunteer_num: data.field['{{makeElUniqueName('volunteer_num')}}'],
                join_method: data.field['{{makeElUniqueName('join_method')}}'],
                volunteer_rule: data.field['{{makeElUniqueName('volunteer_rule')}}'],
                description: reditorUtil.getContent(descIndex),
                min_volunteer_num: data.field['{{makeElUniqueName('min_volunteer_num')}}'],
                time_length: data.field['{{makeElUniqueName('time_length')}}'],
                cityIds: cityIds
            };

            $.ajax({
                contentType: "application/json",
                type: 'post',
                url: url,
                data: JSON.stringify(postParam),
                success: function (outResult) {
                    layer.close(index);
                    if (outResult.Success) {
                        layer.msg(outResult.Message, { icon: 6 });
                        layer.close(popLayerUtil.index);
                        popLayerUtil.onClose();
                    } else {
                        layer.msg(outResult.Message, { icon: 5 });
                    }
                },
                error: function (error) {
                    layer.close(index);
                    layui.validator.processValidateError(error);
                }
            });
            return false;
        });
    });
</script>
